<template>
  <view class="preview_map_wrap">
    <u-popup
      :show="previewMapShow"
      :round="10"
      mode="bottom"
      closeable
      @close="handleColse"
    >
      <view v-if="show" class="preview_map_body">
        <ViewMap
          ref="viewMap"
          key="preview-map"
          :location="location"
          :markers-points="markers"
          :polyline="polyline"
          :height="mapHeight"
        />
        <view class="size_info_wrap">
          <view class="store-name">{{ ztStoreInfo.add_alias }}</view>
          <view class="address-box">
            <view class="store-address">{{ storeAddress }}</view>
            <view v-if="ztStoreInfo.distance" class="distance">
              {{ distance }}
            </view>
          </view>
        </view>
      </view>
    </u-popup>
  </view>
</template>
<script>
import ViewMap from './map'
export default {
  components: { ViewMap },
  props: {
    location: {
      type: Object,
      default: () => ({ latitude: null, longitude: null })
    },
    show: {
      type: Boolean,
      default: false
    },
    ztStoreInfo: {
      type: Object,
      default: () => {}
    },
    polylinePoints: {
      type: Array,
      default: () => []
    },
  },
  // #ifdef MP-WEIXIN
  options: {
    styleIsolation: 'shared' // 小程序配置 - 解除样式隔离
  },
  // #endif
  data() {
    return {
      previewMapShow: false,
      mapHeight: 0
    }
  },
  computed: {
    storeAddress() {
      const {
        provinceName = '',
        cityName = '',
        areaName = '',
        streetName = '',
        detail_address = ''
      } = this.ztStoreInfo ?? {}
      const address = provinceName + cityName + areaName + streetName + detail_address
      return address
    },
    distance() {
      const value = this.ztStoreInfo?.distance
      if (!value) return ''
      let distance = 0
      if (value < 1000) {
        distance = `${value}m`
      }
      if (value >= 1000) {
        const val = (value / 1000).toFixed(1)
        distance = `${val}km`
      }
      return distance
    },
    markers() {
      const markers = [...this.polylinePoints]
      if (markers.length !== 0) {
        markers[1] = {
          ...markers[1],
          iconPath: '/static/image/icon_store@2x.png',
          width: 80,
          height: 80
        }
      }
      return markers
    },
    polyline() {
      const polyline = [{
        points: [...this.polylinePoints],
        color: '#31c27cDD',
        width: 10,
        dottedLine: false
      }]
      return polyline
    },
  },
  watch: {
    show(val) {
      this.$refs.viewMap?.resetState()
      this.previewMapShow = val
      if (val) {
        this.mapHeight = this.getMapContainerHeight()
      }
    }
  },
  methods: {
    getMapContainerHeight() {
      const sizeRate = uni.getSystemInfoSync().windowHeight / uni.getSystemInfoSync().windowWidth
      return Math.floor(750 * sizeRate)
    },
    handleColse() {
      this.$emit('update:show', false)
    },
  }
}
</script>
<style lang="scss" scoped>
.preview_map_wrap {
  height: 100%;
  position: relative;
  .popup_close {
    position: absolute;
  }
  .preview_map_body {
    position: relative;
    .size_info_wrap {
      position: fixed;
      left: 0;
      right: 0;
      width: 80%;
      margin: auto;
      padding:20rpx;
      background-color: #fff;
      border-radius: $uni-border-radius-lg;
      bottom: calc(100rpx + constant(safe-area-inset-bottom));
      bottom: calc(100rpx + env(safe-area-inset-bottom));
    }
    .store-name{
      height: 40rpx;
      font-size: $uni-font-size-base;
      margin: 24rpx 0 0 24rpx;
    }
    .address-box{
      padding-bottom: 24rpx;
      .store-address{
        width: calc(100% - 160rpx);
        margin: 10rpx 0 0 24rpx;
        color: $uni-grey-666;
        font-size: $uni-font-size-sm;
        float: left;
      }
      .distance{
        max-width: 106rpx;
        padding: 0 6rpx;
        height: 32rpx;
        line-height: 32rpx;
        color: $uni-white;
        font-size: 20rpx;
        text-align: center;
        float: right;
        border-radius: $uni-border-radius-default;
        margin: 10rpx 16rpx 0 16rpx;
        background: $uni-orange;
      }
    }
  }
  /deep/ .u-popup__content__close  {
    margin-top: 20rpx;
    border-radius: 15rpx;
    padding: 20rpx;
    background-color: #fff;
  }
}
</style>
